import { defineComponent } from 'vue';
import '../../../style/index.less';
import { ElDialog, ElPagination, ElTable, ElTableColumn } from 'element-plus';
export default defineComponent({
  name: 'CommonTable',
  props: {
    title:{type:String,default:""},
    data: { type: Object,required: false},
    column: { type: Array, default: ()=>[] },
    requestAuto: { type: Boolean, default: true },
    requestApi: { type: Function, default: (params: any) => Promise<any> },
    initParam: { type: Object, required: false }
  },
  setup(props: any, {attrs, emit, slots, expose }) {
    const dialogVisible = ref(false);
    const pageable = ref({
      page: 1,
      pageSize: 15,
      total: 0
    }) as AnyObject;
    const tableData = ref({}) as AnyObject;
    const searchColumn = computed(() => {
      // [{
      //   search:{el:"ElDatePicker",props:{type:"month"},item:"month"},
      // }]
      return props.column.filter((item:AnyObject)=>item.search)
    });

    const handleSizeChange = () => {
      getTableData();
    };
    const handleCurrentChange = () => {
      getTableData();
    };

    const getTableData = () => {
      const params = {
        page: pageable.page,
        pageSize: pageable.pageSize,
        ...props.initParams
      };
      props.requestApi(params).then((res: any) => {
        tableData.value = res.data;
      });
    };
    watch(
      () => dialogVisible.value,
      (val: boolean) => {
        if (val) {
          !props.data && getTableData();
        }
      }
    );
    expose({ dialogVisible });
    return () => (
      <ElDialog
        lock-scroll
        draggable
        v-model={dialogVisible.value}
        title={props.title}
        style={{ maxWidth: '800px', with: 'auto' }}
      >
        {/*  {...(_item.search.props || {})} */}
        {/* {searchColumn.value.map((_item:AnyObject)=><component is={_item.search.el} v-model={_item.search.item} {...(_item.search.props || {})} range-separator="/"  onChange={getTableData} />)} */}

        <ElTable
          header-row-class-name="table_header"
          size="small"
          {...attrs}
          data={props.data?.list ?? tableData.value.list}
        >
          {props.column.map((_item: AnyObject) => (
            <ElTableColumn prop={_item.prop} label={_item.label} />
          ))}
          {/* <ElTableColumn
            width="45px"
            label="详情"
            v-slots={{
              default: ({ row }: AnyObject) =>
                row.url && (
                  <a class="co-7 hover-color" href={row.url} target="_blank">
                    详情
                  </a>
                )
            }}
          /> */}
        </ElTable>
        <ElPagination
          v-model:current-page={pageable.value.page}
          v-model:page-size={pageable.value.pageSize}
          small
          page-sizes={[15, 30, 50, 100]}
          hide-on-single-page
          layout="total, sizes, prev, pager, next, jumper"
          total={pageable.value.total}
          onSize-change={handleSizeChange}
          onCurrent-change={handleCurrentChange}
        ></ElPagination>
      </ElDialog>
    );
  }
});
